<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Test PngImage</title>

    <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
    <style>
        body {font-family:sans-serif}
        canvas {border:1px solid #ffffff}
    </style>
</head>
<body>
    <button id ="windowAdjust" type="button"style ="float:left" onclick="windowButtonClick()">调窗!</button>
    <button id ="scaleAdjust" type="button" style ="float:left" onclick="scaleButtonClick()">放大!</button>
    <canvas onmousedown="mouseDown(this,event)"onmousemove="mouseMove(event)" onmouseup="mouseUp(event)" id="imageviewer" width="512px" height="512px" style="border: 1px solid;clear:left" mce_style="border: 1px solid;" ></canvas>
    <script src="Promise.js"></script>
    <script src="./pngtoy.min.js"></script>
    <script>
        var icanvas = document.getElementById('imageviewer');
        var icanvasWidth = parseInt(icanvas.getAttribute("width")); 
        var icanvasHeight = parseInt(icanvas.getAttribute("height")); 
        var icontext = icanvas.getContext('2d');
        var dataObj;
        var img = new PngImage();
        var buffer;
        var imgData = icontext.getImageData(0,0,icanvasWidth,icanvasHeight)
        var pngResult;
        var ww=1200;
        var wl=-500;
        var image = new Image();  
        var canvasOffset = $(imageviewer).offset();
        var windowClicked = false;
        var scaleClicked =false;
        img.onload = function() {

            var pngtoy = this.pngtoy;

            dataObj = pngtoy.decode().then(function(results) {

                buffer = new Int16Array(results.bitmap);
                pngResult = results;
                for(var i = 0, j; i < buffer.length; i++) {

                    j = buffer[i];
          buffer[i] = ((j & 0xff) << 8) | ((j & 0xff00) >>> 8); // needed to swap bytes for correct unsigned integer values  

      }

      AdjustWW_WL(buffer,results,icontext,ww,wl);
      //imgData.data    =buffer;
      console.log(buffer);
  });     
        };

        img.onerror = function(e) {
            console.log(e.message);
        };

        img.src = "000005.png";

        function AdjustWW_WL(buffer,results,context, ww,wl)
        {
            for (var i=0;i<results.width;i++)
            {
                for(var j=0;j<results.width;j++)
                {
                    var pix = buffer[j*results.width+i];
                    var resultPix=255;
                    if(pix>=wl+ww/2)
                        resultPix =255;
                    else if (pix<=wl-ww/2)
                        resultPix=0;
                    else
                        resultPix = (pix-(wl-ww/2))/ww*255;

                    imgData.data[j*results.width*4+i*4] = resultPix;
                    imgData.data[j*results.width*4+i*4+1] = resultPix;
                    imgData.data[j*results.width*4+i*4+2] = resultPix;
                    imgData.data[j*results.width*4+i*4+3] = 255;
                }
            }

            context.putImageData(imgData,0,0,0,0,512,512);
            
        }
        var mouseX, mouseY; 
        var objX, objY; 
var isDowm = false; //是否按下鼠标 
function mouseDown(obj, e) { 



    mouseX = Math.floor(e.pageX - canvasOffset.left);
    mouseY = Math.floor(e.pageY - canvasOffset.top);
    console.log("pixel",buffer[mouseY*pngResult.width+mouseX]);

    isDowm = true; 
}
function mouseMove(e) { 


    if (isDowm) { 

        var x = Math.floor(e.pageX - canvasOffset.left);
        var y = Math.floor(e.pageY - canvasOffset.top);
        if (windowClicked)
        {
            ww +=(mouseX-x);
            wl +=(mouseY-y); 
            console.log("ww",ww,"wl:",wl);

            AdjustWW_WL(buffer,pngResult,icontext,ww,wl);        
            mouseX = x;
            mouseY=y;
        }

    // canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持  
    // 指定格式 PNG  
    

    if(scaleClicked){  
        icontext.clearRect(0, 0, icontext.canvas.width, icontext.canvas.height);
        icontext.drawImage(image, 0 - x * (8 - 1), 0 - y * (8 - 1), icontext.canvas.width * 8, icontext.canvas.height * 8);

        icontext.globalCompositeOperation = 'destination-atop';

        var oGrd = icontext.createRadialGradient(x, y, 0, x, y, 200);
        oGrd.addColorStop(0.8, "rgba(0, 0, 0, 1.0)");
        oGrd.addColorStop(1.0, "rgba(0, 0, 0, 0.1)");
        icontext.fillStyle = oGrd;
        icontext.beginPath();

        icontext.arc(x, y, 200, 0, Math.PI*2, true);
        icontext.closePath();
        icontext.fill();

        // draw source image
        icontext.drawImage(image, 0, 0, icontext.canvas.width, icontext.canvas.height);
    }

} 

} 


function mouseUp(e) { 
    if (isDowm) { 
        if(windowClicked)
        image.src = icanvas.toDataURL("image/png");
        
        if(windowClicked|scaleClicked)
        {icontext.clearRect(0, 0, icontext.canvas.width, icontext.canvas.height);
        icontext.drawImage(image, 0, 0, icontext.canvas.width, icontext.canvas.height);
    }
        isDowm = false; 
    } 
} 

function windowButtonClick(){
    document.getElementById("scaleAdjust").disabled =false;
    document.getElementById("windowAdjust").disabled =true;
    windowClicked = true;
    scaleClicked = false;
    image.src = icanvas.toDataURL("image/png");
}

function scaleButtonClick(){
    document.getElementById("windowAdjust").disabled =false;
    document.getElementById("scaleAdjust").disabled =true;
    windowClicked = false;
    scaleClicked = true;
    image.src = icanvas.toDataURL("image/png");
}

</script>
</body>
</html>
